<template>
  <div class="add-contact-page">
    <mu-container>
      <mu-form ref="form" :model="form" label-position="right" label-width="80px">
        <mu-form-item label="国家代码" prop="username">
          <mu-select filterable v-model="dialingPrefix" @change="mSelect" full-width style="padding-bottom:0;margin-bottom:0;min-height:auto;">
            <mu-option v-for="(item,index) in citys" :key="index" :label="item.countryName + '('+item.dialingPrefix+')'" :value="item">{{item.countryName +' ('+item.dialingPrefix+')'}}</mu-option>
          </mu-select>
        </mu-form-item>
        <mu-form-item label="姓名" prop="username" :rules="rules.username">
          <mu-text-field v-model="form.username" prop="username" placeholder="请输入联系人姓名"></mu-text-field>
        </mu-form-item>
        <mu-form-item label="联系电话" prop="msisdn" :rules="rules.msisdn">
          <mu-text-field type="number" v-model="form.iphone" prop="msisdn" placeholder="请输入联系人联系电话"></mu-text-field>
        </mu-form-item>
      </mu-form>
      <mu-button large full-width color="primary" @click="post">添 加</mu-button>
    </mu-container>
  </div>
</template>
<script>
export default {
  data () {
    return {
      dialingPrefix: 'China-(86)',
      form: {
      },
      citys: [],
      rules: {
        username: [
          {
            validate: val => !!val,
            message: '请输入联系人姓名'
          },
          {
            validate: val => val.length <= 30,
            message: '联系人姓名最大长度为30！'
          }
        ],
        iphone: [
          {
            validate: val => !!val,
            message: '请输入联系人电话'
          },
          {
            validate: val => val.length <= 30,
            message: '联系人姓名最大长度为30！'
          }
        ]
      }
    };
  },
  created() {
    this.$api.app.getCountry().then((res) => {
      this.citys = res;
    });
  },
  methods: {
    mSelect(data) {
      console.log(data);
    },
    post () {
      if (!this.form.iphone || !this.form.username) {
        return;
      }
      var userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
      this.$loading('提交中');
      this.form.countryId = this.dialingPrefix._id || '5cc153cb3a5fe5d889398337';
      this.form.msisdn = userInfo.msisdn;
      this.$api.app.contactAdd(this.form).then(res => {
        this.$router.push('contact');
        this.$loading.close();
      }).catch((data) => {
        this.$loading.close();
      });
    }
  }
};
</script>
<style lang="less" scoped>
  .add-contact-page{
    padding-top: 20px;
  }
</style>
<style lang="less">
  .add-contact-page{

  }
</style>
